<template>
	<uni-drawer :visible="show" mode="left" @close="closeDrawer('left')">
		<scroll-view class="leftMenu" scroll-y>
			<view class="left_user_portrait" @click="navTo('/pages/user/user')">
				<view class="portrait-box">
					<image :src="userInfo.userImg || '/static/images/portrait.png'"></image>
				</view>
				<view class="info-box uni-ellipsis">
					<text>{{userInfo.realname || userInfo.username || '游客在线'}}</text>
				</view>
			</view>
			<view class="list-item" v-for="category in leftMenu" :key="category.cat_id" @click="navToDetailGrid(category.url, category.tab)">
				<text>{{ category.title }}</text>
			</view>
		</scroll-view>
	</uni-drawer>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
	import {  
	    mapState
	} from 'vuex'; 
	export default {
		components: {
			uniDrawer
		},
		data() {
			return {
				leftMenu:[]
			}
		},
		props:{
			show:{
				type: Boolean,
				default: false,
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		created(){
			this.loadData();
		},
		methods: {
			async loadData() {
				console.log('loadData')
				let leftMenu = await this.$api.json('leftMenu');
				this.leftMenu = leftMenu;
			},
			//分类链接
			navToDetailGrid(url, tab) {
				if(tab){
					uni.switchTab({  
						url  
					})  
				}else{
					uni.navigateTo({
						url: url
					})
				}
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url){
				if(!this.hasLogin){
					url = '/pages/user/login';
					uni.navigateTo({  
						url  
					})
				}else{
					uni.switchTab({  
						url  
					})  
				}
			},
			closeDrawer(e) {
				if (e === 'left') {
					this.$emit('close')
				}
			}
		}
	}
</script>